<template>
  <div class="divBox">
    <el-card class="box-card">

      <div style="margin-bottom: 20px;">
        <el-select v-model="value1" placeholder="请选择省份" @change="selectChange1">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-select v-model="value2" :disabled="option2Enable" placeholder="请选择市" @change="selectChange2">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="ios-search" label="default" style="margin-left: 20px;"
          @click="userSearchs">搜索</el-button>
        <el-button @click="resetSelect">重置</el-button>
      </div>


      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small">
        <el-table-column label="申请人 ID" min-width="120" prop="agentUserId" align="center" />
        <el-table-column label="城市名称" min-width="120" prop="name" align="center"></el-table-column>
        <el-table-column label="合并名称" min-width="120" prop="mergerName" align="center" />
        <el-table-column label="城市人口" min-width="120" prop="population" align="center" />

        <el-table-column label="操作" min-width="120" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button class="mr10" type="text" size="small" @click="agreeApply(scope.row)"
              v-hasPermi="['admin:user:group:update', 'admin:user:tag:update']">通过</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row, scope.$index)" disable
              v-hasPermi="['admin:user:group:delete', 'admin:user:tag:delete']">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>

  import {
    cityListApi,
    cityListApprove2Api,
    agentRejectApi,  //驳回
    agentApprove2Api, //通过
  } from '@/api/statistic';

  export default {
    name: 'recheck',
    data() {
      return {
        options1: [],
        value1: '',
        options2: [],
        value2: '',
        option2Enable: true,

        tableFrom: {
          page: 1,
          limit: 20,
          parentId: 0
        },
        tableData: {
          data: [],
          total: 0,
        },
        listLoading: true,
      };
    },
    mounted() {
      let params = {
        parentId: this.tableFrom.parentId
      }
      this.cityList(params)
      this.getList();
    },
    methods: {
      selectChange1(e) {
        console.log(e)
        let params = {
          parentId: e
        }
        this.options2 = []
        this.value2 = ''
        this.option2Enable = false
        this.cityList(params)
        this.tableFrom.parentId = e
      },

      selectChange2(e) {
        console.log(e)
        this.tableFrom.parentId = e
      },

      userSearchs() {
        console.log('搜索')
        this.tableFrom.page = 1
        this.getList();
      },
      resetSelect() {
        console.log('重置')
        // this.options1 = []
        this.value1 = ''
        // this.options2 = []
        this.value2 = ''
        this.tableFrom.parentId = 0
        this.getList();
      },
      info() {},


      //获取城市列表的接口
      cityList(params) {
        cityListApi(params).then((res) => {
          if (params.parentId == 0) {
            this.options1 = []
            res.map((item) => {
              let obj = {
                label: item.name,
                value: item.cityId,
                parentId: item.parentId,
                cityId: item.cityId
              }
              this.options1.push(obj)
            })
          } else {
            this.options2 = []
            res.map((item) => {
              let obj = {
                label: item.name,
                value: item.cityId,
                parentId: item.parentId,
                cityId: item.cityId
              }
              this.options2.push(obj)
            })
          }
        });
      },

      // 列表
      getList() {
        let _this = this
        this.listLoading = true;
        console.log(this.tableFrom)
        cityListApprove2Api(this.tableFrom)
          .then((res) => {
            _this.tableData.data = res.list;
            _this.tableData.total = res.total;
            _this.listLoading = false;
          })
          .catch((res) => {
            _this.listLoading = false;
          });
      },
      pageChange(page) {
        this.tableFrom.page = page;
        this.getList();
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val;
        this.getList();
      },
      //通过
      agreeApply(item) {
        this.$confirm('确定通过代理商的复审?', '温馨提示', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            parentId: item.id,
            cityId: item.cityId
          }
          agentApprove2Api(params).then(res=>{
            console.log(res)
            if(res == true){
              this.$message({
                type: 'success',
                message: '已通过!'
              });
              this.tableFrom.page = 1
              this.getList();

            }else{
              this.$message({
                type: 'success',
                message: '通过失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 驳回
      handleDelete(item, idx) {
        this.$confirm('确定驳回代理商的复审?', '温馨提示', {
          confirmButtonText: '驳回',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            parentId: item.id,
            cityId: item.cityId
          }
          agentRejectApi(params).then(res=>{
            console.log(res)
            if(res == true){
              this.$message({
                type: 'success',
                message: '驳回成功!'
              });
              this.tableFrom.page = 1
              this.getList();
            }else{
              this.$message({
                type: 'success',
                message: '驳回失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
  };
</script>

<style lang="scss">
  .col-1 {
    display: flex;
    align-items: center;
  }
</style>
